<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap Min CSS --> 
		<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
		<!-- Owl Theme Default Min CSS --> 
		<link rel="stylesheet" th:href="@{/css/owl.theme.default.min.css}">
		<!-- Owl Carousel Min CSS --> 
		<link rel="stylesheet" th:href="@{/css/owl.carousel.min.css}">
		<!-- Animate Min CSS --> 
		<link rel="stylesheet" th:href="@{/css/animate.min.css}">
		<!-- Boxicons Min CSS --> 
		<link rel="stylesheet" th:href="@{/css/boxicons.min.css}">
		<!-- Magnific Popup Min CSS --> 
		<link rel="stylesheet" th:href="@{/css/magnific-popup.min.css}">
		<!-- Flaticon CSS --> 
		<link rel="stylesheet" th:href="@{/css/flaticon.css}">
		<!-- Meanmenu Min CSS -->
		<link rel="stylesheet" th:href="@{/css/meanmenu.min.css}">
		<!-- Nice Select Min CSS -->
		<link rel="stylesheet" th:href="@{/css/nice-select.min.css}">
		<!-- Odometer Min CSS-->
		<link rel="stylesheet" th:href="@{/css/odometer.min.css}">
		<!-- Date Picker CSS-->
		<link rel="stylesheet" th:href="@{/css/date-picker.min.css}">
		<!-- Muli Fonts Min CSS-->
		<link rel="stylesheet" th:href="@{/css/muli-fonts.css}">
		<!-- Style CSS -->
		<link rel="stylesheet" th:href="@{/css/style.css}">
		<!-- Responsive CSS -->
		<link rel="stylesheet" th:href="@{/css/responsive.css}">
		
		<!-- Favicon -->
		<link rel="icon" type="image/png" th:href="@{/images/favicon.png}">
		<!-- Title -->
		<title>Jubi - Job Board HTML Template</title>
    </head>

    <body>
		<!-- Start Preloader Area -->
		<div class="preloader">
			<div class="lds-ripple">
				<div></div>
				<div></div>
			</div>
		</div>
		<!-- End Preloader Area -->
		
		<!-- Start Header Area -->
		<header class="header-area">
			<!-- Start Top Header -->
			<div class="top-header">
				<div class="container">
					<div class="row align-items-center">
						<div class="col-lg-6 col-md-6">
							<ul class="header-left-content">
								<li>
									<span>Hot Line</span>
									<a href="tel:+1-(514)-312-5678">+1 (514) 312-5678</a>
								</li>
							</ul>
						</div>

						<div class="col-lg-6 col-md-6">
							<div class="header-right-content">
								<ul class="language">
									<li>
										<div class="dropdown language-btn">
											<button class="dropdown-toggle" type="button" data-toggle="dropdown">
												<span>
													Language 
													<i class="bx bx-chevron-down"></i>
												</span>
											</button>
		
											<div class="dropdown-menu">
												<a href="#" class="dropdown-item">
													<img th:src="@{/images/language/english.png}" alt="Flag">
													<span>English</span>
												</a>

												<a href="#" class="dropdown-item">
													<img th:src="@{/images/language/arab.png}" alt="Flag">
													<span>العربيّة</span>
												</a>

												<a href="#" class="dropdown-item">
													<img th:src="@{/images/language/germany.png}" alt="Flag">
													<span>Germany</span>
												</a>

												<a href="#" class="dropdown-item">
													<img th:src="@{/images/language/portugues.png}" alt="Flag">
													<span>Português</span>
												</a>
	
												<a href="#" class="dropdown-item">
													<img th:src="@{/images/language/china.png}" alt="Flag">
													<span>简体中文</span>
												</a>
											</div>
										</div>
									</li>
								</ul>

								<ul class="log-in">
									<li>
										<a th:href="log-in-register.html">
											<i class="bx bxs-lock"></i>
											Log In
										</a>
									</li>

									<li>
										<a th:href="log-in-register.html">
											<i class="bx bxs-user"></i>
											Register
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Start Top Header -->
			
			<!-- Start Navbar Area -->
			<div class="navbar-area">
				<div class="mobile-nav">
					<div class="container">
						<div class="mobile-menu">
							<div class="logo">
								<a th:href="index.html">
									<img th:src="@{/images/logo.png}" alt="logo">
								</a>
							</div>
						</div>
					</div>
				</div>
	
				<div class="desktop-nav">
					<div class="container">
						<nav class="navbar navbar-expand-md navbar-light">
							<a class="navbar-brand" th:href="index.html">
								<img th:src="@{/images/logo.png}" alt="logo">
							</a>
	
							<div class="collapse navbar-collapse mean-menu">
								<ul class="navbar-nav m-auto">
									<li class="nav-item">
										<a href="#" class="nav-link">
											Home
											<i class="bx bx-chevron-down"></i>
										</a>
			
										<ul class="dropdown-menu">
											<li class="nav-item">
												<a th:href="index.html" class="nav-link">Home One</a>
											</li>
											<li class="nav-item">
												<a th:href="index-2.html" class="nav-link">Home Two</a>
											</li>
											<li class="nav-item">
												<a th:href="index-3.html" class="nav-link">Home Three</a>
											</li>
										</ul>
									</li>

									<li class="nav-item">
										<a href="#" class="nav-link active">
											Jobs
											<i class="bx bx-chevron-down"></i>
										</a>
	
										<ul class="dropdown-menu">
											<li class="nav-item">
												<a th:href="job-listing.html" class="nav-link">Job Listing</a>
											</li>
											<li class="nav-item">
												<a th:href="post-job.html" class="nav-link">Post A Job</a>
											</li>
											<li class="nav-item">
												<a th:href="job-details.html" class="nav-link active">Job Details</a>
											</li>
										</ul>
									</li>

									<li class="nav-item">
										<a href="#" class="nav-link">
											Candidates
											<i class="bx bx-chevron-down"></i>
										</a>
	
										<ul class="dropdown-menu">
											<li class="nav-item">
												<a th:href="candidates-listing.html" class="nav-link">Candidates Listing</a>
											</li>
											<li class="nav-item">
												<a th:href="candidates-details.html" class="nav-link">Candidates Details</a>
											</li>

											<li class="nav-item">
												<a href="#" class="nav-link">
													Candidate Dashboard
													<i class="bx bx-chevron-down"></i>
												</a>
					
												<ul class="dropdown-menu">
													<li class="nav-item">
														<a th:href="dashboard.html" class="nav-link">Dashboard</a>
													</li>
													<li class="nav-item">
														<a th:href="profile.html" class="nav-link">Profile</a>
													</li>
													<li class="nav-item">
														<a th:href="resume.html" class="nav-link">Resume</a>
													</li>
													<li class="nav-item">
														<a th:href="bookmarks.html" class="nav-link">Bookmarks</a>
													</li>
													<li class="nav-item">
														<a th:href="applied-jobs.html" class="nav-link">Applied Jobs</a>
													</li>
													<li class="nav-item">
														<a th:href="alert-jobs.html" class="nav-link">Alert Jobs</a>
													</li>
													<li class="nav-item">
														<a th:href="message.html" class="nav-link">Message</a>
													</li>
													<li class="nav-item">
														<a th:href="change-password.html" class="nav-link">Change Password</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>

									<li class="nav-item">
										<a href="#" class="nav-link">
											Employers
											<i class="bx bx-chevron-down"></i>
										</a>
	
										<ul class="dropdown-menu">
											<li class="nav-item">
												<a th:href="employers-listing.html" class="nav-link">Employers Listing</a>
											</li>
											<li class="nav-item">
												<a th:href="employers-details.html" class="nav-link">Employers Details</a>
											</li>
										</ul>
									</li>

									<li class="nav-item">
										<a href="#" class="nav-link">
											Pages
											<i class="bx bx-chevron-down"></i>
										</a>
			
										<ul class="dropdown-menu">
											<li class="nav-item">
												<a th:href="about-us.html" class="nav-link">About Us</a>
											</li>
											<li class="nav-item">
												<a th:href="pricing.html" class="nav-link">Pricing</a>
											</li>
											<li class="nav-item">
												<a th:href="faq.html" class="nav-link">FAQ</a>
											</li>

											<li class="nav-item">
												<a href="#" class="nav-link">
													Blog
													<i class="bx bx-chevron-down"></i>
												</a>
					
												<ul class="dropdown-menu">
													<li class="nav-item">
														<a th:href="blog.html" class="nav-link">Blog</a>
													</li>
													<li class="nav-item">
														<a th:href="blog-details.html" class="nav-link">Blog Details</a>
													</li>
												</ul>
											</li>

											<li class="nav-item">
												<a th:href="contact-us.html" class="nav-link">Contact Us</a>
											</li>
											<li class="nav-item">
												<a th:href="terms-conditions.html" class="nav-link">Terms & Conditions</a>
											</li>
											<li class="nav-item">
												<a th:href="privacy-policy.html" class="nav-link">Privacy Policy</a>
											</li>
											<li class="nav-item">
												<a th:href="log-in-register.html" class="nav-link">Log In / Register</a>
											</li>
											<li class="nav-item">
												<a th:href="freelancer.html" class="nav-link">Freelancer</a>
											</li>
											<li class="nav-item">
												<a th:href="testimonials.html" class="nav-link">Testimonials</a>
											</li>
											<li class="nav-item">
												<a th:href="coming-soon.html" class="nav-link">Coming Soon</a>
											</li>
											<li class="nav-item">
												<a th:href="404.html" class="nav-link">404 Error Page</a>
											</li>
										</ul>
									</li>
								</ul>
								
								<div class="others-option">
									<div class="get-quote">
										<a th:href="post-job.html" class="default-btn">
											Post a Job
										</a>
									</div>
								</div>
							</div>
						</nav>
					</div>
				</div>
	
				<div class="others-option-for-responsive">
					<div class="container">
						<div class="dot-menu">
							<div class="inner">
								<div class="circle circle-one"></div>
								<div class="circle circle-two"></div>
								<div class="circle circle-three"></div>
							</div>
						</div>
						
						<div class="container">
							<div class="option-inner">
								<div class="others-option justify-content-center d-flex align-items-center">
									<div class="get-quote">
										<a th:href="post-job.html" class="default-btn">
											Post a Job
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End Navbar Area -->
		</header>
		<!-- End Header Area -->

		<!-- Start Page Title Area -->
		<div class="page-title-area">
			<div class="container">
				<div class="page-title-content">
					<h2>Job Details</h2>
					<ul>
						<li>
							<a th:href="index.html">
								Home 
							</a>
						</li>
						<li class="active">Job Details</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End Page Title Area -->

		<!-- Start Job Details Area -->
		<section class="job-details-area ptb-100">
			<div class="container">
				<div class="row">
					<div class="col-lg-8">
						<div class="hot-jobs-list">
							<div class="row align-items-center">
								<div class="col-lg-2">
									<div class="hot-jobs-img">
										<img th:src="@{/images/hot-jobs/hot-jobs-1.png}" alt="Image">
									</div>
								</div>

								<div class="col-lg-6">
									<div class="hot-jobs-content">
										<h3>Finance & Accounts</h3>
										<span class="sub-title">Finix loans & funding agency</span>
										<ul>
											<li><span>Vacancy:</span> 01</li>
										</ul>
									</div>
								</div>

								<div class="col-lg-4">
									<div class="hot-jobs-btn">
										<a href="#" class="default-btn">Apply Now</a>
										<p><span>Deadline: </span>Dec 30, 2020</p>
									</div>
								</div>
							</div>
						</div>

						<div class="job-details-content">
							<h3>Job Description</h3>
							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur</p>

							<h4>Responsibilities:</h4>

							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A nisi aspernatur modi doloribus dolorem quidem! Neque placeat numquam vel magni ipsam, similique eligendi sunt laudantium, nihil alias soluta eos in Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et nam eveniet quasi.</p>

							<ul>
								<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
								<li>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</li>
								<li>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
								<li>Aliquyam erat, sed diam voluptua</li>
							</ul>

							<h4>Qualifications:</h4>

							<ul>
								<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
								<li>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</li>
								<li>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
								<li>Aliquyam erat, sed diam voluptua</li>
							</ul>

							<h4>Competencies:</h4>

							<ul>
								<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
								<li>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</li>
								<li>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
								<li>Aliquyam erat, sed diam voluptua</li>
								<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
								<li>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet, </li>
								<li>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
								<li>Aliquyam erat, sed diam voluptua.</li>
							</ul>

							<h4>Experience Requirements:</h4>

							<ul>
								<li>Stet clita kasd gubergren, no sea takimata sanctus</li>
								<li>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet</li>
								<li>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor</li>
							</ul>
						</div>
					</div>

					<div class="col-lg-4">
						<div class="job-details-sidebar">
							<div class="job-widget">
								<h3>Share This Job</h3>

								<ul class="social-icon">
									<li>
										<a href="#">
											<i class="bx bxl-facebook"></i>
										</a>
									</li>
									<li>
										<a href="#">
											<i class="bx bxl-instagram"></i>
										</a>
									</li>
									<li>
										<a href="#">
											<i class="bx bxl-linkedin-square"></i>
										</a>
									</li>
									<li>
										<a href="#">
											<i class="bx bxl-twitter"></i>
										</a>
									</li>
								</ul>
							</div>

							<div class="job-widget">
								<h3>Job Overview</h3>
								
								<ul class="overview">
									<li>
										Published On
										<span>: Oct 01, 2020</span>
									</li>
									<li>
										Vacancy
										<span>: 01</span>
									</li>
									<li>
										Job Type
										<span>: Part Time</span>
									</li>
									<li>
										Experience
										<span>: 3 Year(s)</span>
									</li>
									<li>
										Job Location
										<span>: Alaska(s)</span>
									</li>
									<li>
										Category
										<span>: Finance</span>
									</li>
									<li>
										Gender
										<span>: Both</span>
									</li>
									<li>
										Salary
										<span>: $700.00</span>
									</li>
									<li>
										Application Deu
										<span>: 10.11.2020</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- End Job Details Area -->

		<!-- Start Subscribe Area -->
		<section class="subscribe-area subscribe-area-about-page">
			<div class="container">
				<div class="subscribe-bg">
					<div class="row align-items-center">
						<div class="col-lg-6">
							<div class="subscribe-content">
								<h2>Find Your Next Great Job Opportunity!</h2>
							</div>
						</div>
	
						<div class="col-lg-6">
							<form class="newsletter-form" data-toggle="validator">
								<input type="email" class="form-control" placeholder="Enter email address" name="EMAIL" required autocomplete="off">
	
								<button class="default-btn" type="submit">
									<span>Subscribe</span>
								</button>
	
								<div id="validator-newsletter" class="form-result"></div>
								<p>Join The Newsletter 10,000 Users Already!</p>
							</form>	
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- End Subscribe Area -->

		<!-- Start Footer Area -->
		<footer class="footer-area pt-100 pb-70">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-6">
						<div class="single-footer-widget single-bg">
							<a th:href="index.html" class="logo">
								<img th:src="@{/images/logo.png}" alt="Image">
							</a>

							<p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consec tetur.</p>

							<ul class="social-icon">
								<li>
									<a href="#">
										<i class="bx bxl-facebook"></i>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="bx bxl-instagram"></i>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="bx bxl-linkedin-square"></i>
									</a>
								</li>
								<li>
									<a href="#">
										<i class="bx bxl-twitter"></i>
									</a>
								</li>
							</ul>
						</div>
					</div>

					<div class="col-lg-3 col-md-6">
						<div class="single-footer-widget">
							<h3>Contact</h3>

							<ul class="address">
								<li>
									<i class="bx bx-phone-call"></i>
									<span>Phone:</span>
									<a href="tel:+1-(514)-7939-357">+1 (514) 7939-357</a>
								</li>
								<li>
									<i class="bx bx-envelope"></i>
									<span>Email:</span>
									<a href="mailto:hello@jubi.com">hello@jubi.com</a>
								</li>
								<li class="location">
									<i class="bx bx-location-plus"></i>
									<span>Address:</span>
									6890 Blvd, The Bronx, NY 1058 New York, USA
								</li>
							</ul>
						</div>
					</div>

					<div class="col-lg-3 col-md-6">
						<div class="single-footer-widget">
							<h3>Helpful Resources</h3>

							<ul class="import-link">
								<li>
									<a href="#">Create Account</a>
								</li>
								<li>
									<a href="#">Contact Us</a>
								</li>
								<li>
									<a href="#">Site Map</a>
								</li>
								<li>
									<a href="#">Terms of Use</a>
								</li>
								<li>
									<a href="#">Privacy Centre</a>
								</li>
								<li>
									<a href="#">Blog</a>
								</li>
							</ul>
						</div>
					</div>

					<div class="col-lg-3 col-md-6">
						<div class="single-footer-widget">
							<h3>Job Seekers</h3>

							<ul class="import-link">
								<li>
									<a href="#">Create Account</a>
								</li>
								<li>
									<a href="#">Browse Jobs</a>
								</li>
								<li>
									<a href="#">Upload CV</a>
								</li>
								<li>
									<a href="#">Company Profile</a>
								</li>
								<li>
									<a href="#">International Jobs</a>
								</li>
								<li>
									<a href="#">FAQ</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- End Footer Area -->

		<!-- Start Copy Right Area -->
		<div class="copy-right-area">
			<div class="container">
				<p>
					© 2020 Jubi Is Proudly Created By
					<a href="#">EnvyTheme</a>
				</p>
			</div>
		</div>
		<!-- End Copy Right Area -->
		
		<!-- Start Go Top Area -->
		<div class="go-top">
			<i class="bx bx-chevrons-up"></i>
			<i class="bx bx-chevrons-up"></i>
		</div>
		<!-- End Go Top Area -->
		

        <!-- Jquery Min JS -->
        <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <!-- Popper Min JS -->
        <script th:src="@{/js/popper.min.js}"></script>
        <!-- Bootstrap Min JS -->
        <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
        <!-- Meanmenu Min JS -->
		<script th:src="@{/js/meanmenu.min.js}"></script>
		<!-- Wow Min JS -->
        <script th:src="@{/js/wow.min.js}"></script>
        <!-- Owl Carousel Min JS -->
		<script th:src="@{/js/owl.carousel.min.js}"></script>
        <!-- Nice Select Min JS -->
		<script th:src="@{/js/nice-select.min.js}"></script>
        <!-- Magnific Popup Min JS -->
		<script th:src="@{/js/magnific-popup.min.js}"></script>
		<!-- Mixitup JS --> 
		<script th:src="@{/js/jquery.mixitup.min.js}"></script>
		<!-- Appear Min JS --> 
        <script th:src="@{/js/appear.min.js}"></script>
		<!-- Odometer Min JS --> 
		<script th:src="@{/js/odometer.min.js}"></script>
		<!-- Range Slider Min JS --> 
		<script th:src="@{/js/range-slider.min.js}"></script>
		<!-- Datepicker Min JS --> 
		<script th:src="@{/js/bootstrap-datepicker.min.js}"></script>
		<!-- Form Validator Min JS -->
		<script th:src="@{/js/form-validator.min.js}"></script>
		<!-- Contact JS -->
		<script th:src="@{/js/contact-form-script.js}"></script>
		<!-- Ajaxchimp Min JS -->
		<script th:src="@{/js/ajaxchimp.min.js}"></script>
        <!-- Custom JS -->
		<script th:src="@{/js/custom.js}"></script>
    </body>
</html>